<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%String path = request.getContextPath(); 
String pathfile = path+"/view";%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<title>Lexy - 博客 - 文件管理器</title>
    <meta name="keywords" content="Lexy,博客,Lexy-博客 ,响应式后台">
    <link rel="shortcut icon" href="favicon.ico">
     
   	<link href="<%=pathfile %>/plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="<%=pathfile %>/bac/css/font-awesome.min.css" rel="stylesheet">
    <link href="<%=pathfile %>/bac/css/animate.css" rel="stylesheet">
    <link href="<%=pathfile %>/bac/css/style.css" rel="stylesheet">
    <link href="css/file-manager.css" rel="stylesheet">
    <link href="<%=pathfile %>/plugins/blueimp/css/blueimp-gallery.min.css" rel="stylesheet">
    
    
    <style type="text/css">
    
    	.btn-h{
    		height: 40px;
    	}
    	
    	.btn-page{float: left; width:30%}
    	.btn-page-style-select{width:15%;float:left;}
    	.btn-page-style{width:30%;float:left;}
    </style>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <div class="file-manager">
                            <h5>显示：</h5>
                            <a name="" class="file-control active">所有</a>
                            <a name="" class="file-control">文档</a>
                            <a name="" class="file-control">视频</a>
                            <a name="" class="file-control">图片</a>
                            <div class="hr-line-dashed"></div>
                            <button class="btn btn-primary btn-block">上传文件</button>
                            <div class="hr-line-dashed"></div>
                            <h5>文件夹</h5>
                            <ul class="folder-list" style="padding: 0">
                                <li><a href="file_manager.html"><i class="fa fa-folder"></i> 文件</a>
                                </li>
                                <li><a href="file_manager.html"><i class="fa fa-folder"></i> 图片</a>
                                </li>
                                <li><a href="file_manager.html"><i class="fa fa-folder"></i> Web页面</a>
                                </li>
                                <li><a href="file_manager.html"><i class="fa fa-folder"></i> 插图</a>
                                </li>
                                <li><a href="file_manager.html"><i class="fa fa-folder"></i> 电影</a>
                                </li>
                                <li><a href="file_manager.html"><i class="fa fa-folder"></i> 书籍</a>
                                </li>
                            </ul>
                            <h5 class="tag-title">标签</h5>
                            <ul class="tag-list" style="padding: 0">
                                <li><a href="file_manager.html">爱人</a>
                                </li>
                                <li><a href="file_manager.html">工作</a>
                                </li>
                                <li><a href="file_manager.html">家庭</a>
                                </li>
                                <li><a href="file_manager.html">孩子</a>
                                </li>
                                <li><a href="file_manager.html">假期</a>
                                </li>
                                <li><a href="file_manager.html">音乐</a>
                                </li>
                                <li><a href="file_manager.html">照片</a>
                                </li>
                                <li><a href="file_manager.html">电影</a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-9 animated fadeInRight " >
                <div class="row">
	                    <div class="col-sm-12" >
							<div id="file-list"></div>
							<div id="blueimp-gallery" class="blueimp-gallery">
                                <div class="slides"></div>
                                <h3 class="title"></h3>
                                <a class="prev">‹</a>
                                <a class="next">›</a>
                                <a class="close">×</a>
                                <a class="play-pause"></a>
                                <ol class="indicator"></ol>
                            </div>
	                    </div>
	                    <div class="col-sm-12" >
							<div class="i-box" id="page-list">
								<div>
								    <button id="file-page-left" type="button" class="btn btn-white btn-h btn-page-style ">
								        <i class="fa fa-chevron-left"></i>
								    </button>
								    <select class="form-control btn-h btn-page-style-select" id="file-page-size"  name="account">
								    	<option value= "10"> 10 </option>
								    	<option value= "20"> 20 </option>
								    	<option value= "30"> 30 </option>
								    	<option value= "50"> 50 </option>
								    	<option value= "all"> 全部 </option>
								    </select>
								    <select id="file-page-select" class="form-control btn-h btn-page-style-select " name="account">
								    </select>
								    <button id="file-page-right" type="button" class="btn btn-white btn-h btn-page-style">
								        <i class="fa fa-chevron-right"></i>
								    </button>
								</div>
							</div>
	                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 全局js -->
    <script src="<%=pathfile %>/rec/js/jquery-1.8.3.min.js"></script>
    <script src="<%=pathfile %>/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="js/async-ajax.js"></script>
    <!-- 自定义js -->
    <!-- <script src="js/file-manager.js"></script> -->
    <script src="<%=pathfile %>/bac/js/content.js"></script>
    <script src="<%=pathfile %>/plugins/blueimp/jquery.blueimp-gallery.min.js"></script>

	

    <script>
        $(document).ready(function () {
            $('.file-box').each(function () {
                animationHover(this, 'pulse');
            });
            
        });
                
        
        
        function _select_option(val){
        	$("#file-page-select option[value='"+val+"']").attr("selected","selected");
        }
        
        
        function _pre_page(){
        	var selectNum = $("#file-page-select").val();
       		if(parseInt(selectNum)>1){
       			var prePageNum = parseInt(selectNum)-1;
	       		toFileManagerFile(prePageNum);
	       		_select_option(prePageNum);
	       		select_img();
       		}else{
       			alert("没有了....");
       		}
        }
        
        
        function _next_page(){
        	var selectNum = $("#file-page-select").val();
       		var nextPageNum = parseInt(selectNum)+1;
       		if(parseInt(selectNum)<=nextPageNum){
	       		toFileManagerFile(nextPageNum);
	       		_select_option(nextPageNum);
	       		select_img();
       		}else{
       			alert("没有了....");
       		}
        }

        
        // pageSize 变化时 跳转到第一页，从新分页
        function _page_size_change(){
        	//var selectNum = $("#file-page-select").val();
        	
        	var pageNumber = "1"; 
        	//toFileManagerAll("1" , "file-page-select");
        	toFileManagerAll(pageNumber , "file-page-select");
       		_select_option(pageNumber);
       		select_img();
        }
        
        
        function toFileManagerAll(pageNum , selectid){
      	  
    	  	var pageSizeStr = $("#file-page-size").val();
	    	var pageNumber = "{pageNum:'"+pageNum+"',pageSizeStr:'"+pageSizeStr+"'}";
	    	var data = doPost("toFileManager", pageNumber);
	    	var fileList = data.detail.list;
	    	if(fileList.length>0){
	    		var htmlAll = "";
	    		for(var i = 0 ; i < fileList.length ; i++ ){
	    			var fileObj = fileList[i];
	    			htmlAll += "<div class='file-box img-box '><div class='file'><a name='><span class='corner'></span><div class='image'><img alt='image' class='img-responsive' src='../../../../upload/"+fileObj.upload_path+"/"+fileObj.file_name +"'></div><div class='file-name'>"+fileObj.file_name +"<br/><small>添加时间："+fileObj.upload_time +"</small></div></a></div></div>";
	    		}
	    		//console.log(htmlAll);
	    		$("#file-list").empty();
	        	$("#file-list").append(htmlAll);
	    	}
	    	
	    	var totalPage = data.detail.totalPage
	    	
	    	if(totalPage){
	    		
	    	}
	   		var option = "";
	    	for(var i = 1 ; i <= parseInt(totalPage) ; i ++){
	    		option += "<option value='"+i+"'>第"+i+"页</option>";
	    	}
	    	$("#"+selectid).empty();
	    	$("#"+selectid).append(option);
	    }
        function toFileManagerFile(pageNum){
        	
        	var pageSizeStr = $("#file-page-size").val();
	    	var pageNumber = "{pageNum:'"+pageNum+"',pageSizeStr:'"+pageSizeStr+"'}";
        	var data = doPost("toFileManager", pageNumber);
        	var fileList = data.detail.list;
        	if(fileList.length>0){
        		var htmlAll = "";
        		for(var i = 0 ; i < fileList.length ; i++ ){
        			var fileObj = fileList[i];
        			
        			
        			var img_url = "../../../../upload/"+fileObj.upload_path+"/"+fileObj.file_name;
        			//var top_pic = "<img src="+img_url+">";
        			//top_pic = "&lt;img src=../../../../upload/"+fileObj.upload_path+"/"+fileObj.file_name +"&gt;";
        			var yiDong = "onMouseOver='toolTip(<img src="+img_url+">";
        			htmlAll += "<div class='file-box img-box '><div class='file'><a name='><span class='corner'></span><div class=' image smallimage'  rel='"+img_url+"' ><img alt='image' class='img-responsive' src='"+img_url+"'></div><div class='file-name'>"+fileObj.file_name +"<br/><small>添加时间："+fileObj.upload_time +"</small></div></a></div></div>";
        		}
        		//console.log(htmlAll);
        		$("#file-list").empty();
            	$("#file-list").append(htmlAll);
        	}
        	
        	var totalPage = data.detail.totalPage
        	var pageDiv = "<div>";

        }   
        
       	function select_img(){
       		$('.file-box').click(function () {
	      		$(this).toggleClass('selected');
	      	 	if ($('.file-box.selected').length == 0){
	      	    	$('.select').removeClass('selected');
	      	 	} else{
	      	    	$('.select').addClass('selected');
	      	 	}
       		})
       		if ($('.file-box.selected').length > 0){
           	   $('.send').addClass('selected');
       		}else{
           	  $('.send').removeClass('selected');
           	  $('.send').attr('data-counter',$('li.selected').length);
       	  	}
       		
       		shift_select();
       	}
       	/* function select_img(){
       		$('.file-name').click(function () { 
	      		$(this).toggleClass('selected');
	      	 	if ($('.file-name.selected').length == 0){
	      	    	$('.select').removeClass('selected');
	      	 	} else{
	      	    	$('.select').addClass('selected');
	      	 	}
       		})
       		if ($('.file-name.selected').length > 0){
           	   $('.send').addClass('selected');
       		}else{
           	  $('.send').removeClass('selected');
           	  $('.send').attr('data-counter',$('li.selected').length);
       	  	}
       		
       		//shift_select();
       	} */
       	
       	var rem=new Array(); 
       	function shift_select(){  
       	    $(".file-box").click(function (e){  
       	        
       	        if(e.shiftKey){  
       	            rem.push($(".file-box").index($(this)));
       	            var upOne = rem[rem.length-2];
       	            var clazzVal = $(this).attr("class");
       	            var iMin =  Math.min(rem[rem.length-2],rem[rem.length-1])  
       	            var iMax =  Math.max(rem[rem.length-2],rem[rem.length-1])  
       	            for(i=iMin;i<=iMax;i++){  
       	                $(".file-box:eq("+i+") ").addClass("selected") ;  
       	                //这边部分为逻辑代码，你可以根据需要来处理全中的div  
       	               //$(".box div:eq("+i+")")这为选中的div  
       	            }  
       	        }else{  
       	            //$(this).toggleClass("selected");  
       	        }  
       	    });  
       	} 
       	
    	
       	
       	
       	$(function(){
        	toFileManagerAll("1" , "file-page-select");
        	select_img();
        	/* $("#file-page-select").change(function(){
        		var selectNum = $(this).val();
        		toFileManagerFile(selectNum);
        	}) */
        	
        	
        	//文件管理-翻页- 上一页
	       	$("#file-page-left").click(function(){
	       		_pre_page();
	       	})
        	//文件管理-翻页- 下一页
	       	$("#file-page-right").click(function(){
	       		_next_page();
	       	})
        	
	       	// 文件管理-翻页
	       	$("#file-page-select").change(function(){
        		var selectNum = $(this).val();
        		toFileManagerFile(selectNum);
        		_select_option(selectNum);
        		select_img();
        		//_top_Notice();
        	})
        	
        	
        	// 当pageSize 变化时， 刷新当前页面
        	$("#file-page-size").change(function(){
        		_page_size_change();
        	})
        	
        	$(".file-box.img-box").dblclick(function(){
        		alert("OK");
        	})
        	
        	// 初始化方法
        });
       	
       
    </script>
    <!--统计代码，可删除-->

</body>
</html>